import Taro, { Component } from "@tarojs/taro";
import { View, Button, Text, Image } from "@tarojs/components";
import { AtInput, AtForm } from "taro-ui";
import Verification from "./verification";
import "./register.less";

class RegisterComponent extends Component {
  state = {
    tel: "",
    code: "",
    inviteid:''
  };



  login() {
    if (!this.validateUserForm()) {
      return;
    }
    const { tel, code } = this.state;
    this.props.userLogin({ tel, code });
  }

  register() {
    if (!this.validateUserForm()) {
      return;
    }
    const { tel, code, inviteid } = this.state;

    this.props.userRegister({
      tel,code,inviteid
    })
  }

  validateUserForm() {
    const { status } = this.props.parent.state;
    const { tel, code, inviteid } = this.state;
    if (tel === "" ) {
      Taro.showToast({
        title: "请输入手机号！",
        icon:'none'
      })
      return false;
    }
    if (!/^1[3456789]\d{9}$/.test(tel)) {
      Taro.showToast({
        title: "手机号格式错误！",
        icon:'none'
      })
      return false;
    }
    if (code === "") {
      Taro.showToast({
        title: "请输入手机验证码！",
        icon:'none'
      })
      return false;
    }
    if (parseInt(status) === 0) {
      if (inviteid === "") {
        Taro.showToast({
          title: "请输入邀请码！",
          icon:'none'
        })
        return false;
      }
    }
    return true
  }

  choseUserStatusForAction() {
    const { status } = this.props.parent.state;
    if (!!status) {
      this.login();
    } else {
      this.register();
    }
  }

  showModal() {
    const { parent } = this.props;
    parent.setState({
      show: true,
      timetemp: new Date().getTime(),
      imgcode:''
    })
  }

  render() {
    const { tel, code } = this.state;
    const { status } = this.props.parent.state;
    return [
      <View className="register-template">
        <View className="register-template-con">
          <AtForm >
            <AtInput
              name="tel"
              title="手机号"
              value={tel}
              type="text"
              placeholder="请输入您的手机号"
              onBlur={() => {
                setTimeout(window.scrollTo(0, 0), 200);
              }}
              onChange={value => {
                this.setState({
                  tel: value
                });
              }}
            />
            <AtInput
              clear
              title="验证码"
              type="text"
              maxLength="4"
              border={status === 0}
              value={code}
              placeholder="请输入验证码"
              onBlur={() => {
                setTimeout(window.scrollTo(0, 0), 200);
              }}
              onChange={value => {
                this.setState({
                  code: value
                });
              }}
            >
              <Verification ref="verifica" showModal={this.showModal.bind(this)}  status={status}  parent={this} />
            </AtInput>
            {!status && (
              <AtInput
                name="inviteid"
                title="邀请码"
                type="text"
                value={this.state.inviteid}
                onBlur={() => {
                  setTimeout(window.scrollTo(0, 0), 200);
                }}
                onChange={(value) => {
                  this.setState({
                    inviteid:value
                  })
                }}
                border={false}
                placeholder="请输入邀请码（必填）"
              />
            )}
          </AtForm>
        </View>
      </View>,
      <View
        className="service-agreement"
        style={{ top: !status ? "450px" : "400px" }}
      >
        <View className="service-info">
          {!status && [
            <Image
              style="width:14px;height:14px;"
              src={require("../../assets/img/aggree.png")}
            />,
            <Text style="margin-left:10px;font-size:14px;color:#B2B2B2;">
              同意
            </Text>,
            <Text style="font-size:14px;color:#69B8FC;" onClick={() => {
              Taro.redirectTo({
                url:'/pages/mine/agreement'
              })
            }}>《服务协议》</Text>
          ]}
        </View>
        <View className="has-account-login">
          {!status ? ([
            <Text style="font-size:14px;color:#B2B2B2;">如已注册，点此</Text>,
            <Text onClick={() => {
              this.setState({
                status:1
              }, () => {
                this.props.parent.setState({
                  status:1
                })
              })
            }} style="font-size:14px;color:#FAA24B;">登录</Text>
          ]) : ([
              <Text onClick={() => {
                this.setState({
                  status:0
                }, () => {
                  this.props.parent.setState({
                    status:0
                  })
                })
              }} style="font-size:14px;color:#FAA24B;">立即注册</Text>
          ])}
        </View>
      </View>,
      <View
        className="register-btn"
        style={{ top: !status ? "500px" : "450px" }}
      >
        <Button
          onClick={this.choseUserStatusForAction.bind(this)}
          style="background-color:#409EFF;border:none"
          type="primary"
        >
          {!status ? "立即注册" : "登录"}
        </Button>
      </View>
    ];
  }
}
export default RegisterComponent;
